<!DOCTYPE html>
<html>
  <head>
    <title>查看造4造5数据用</title>
    <meta charset="utf-8">
  </head>
  <body>
	  	<!-- 普通拖入组件 start-->
	<div id='dragDiv' style='position:absolute;left:458px;top:9px;'>
		<div style='height:20px;width:150px;background-color:#444444;color:#ffffff;'>
			把文件拖到这里面
		</div>
	</div>
	<!-- 普通拖入组件 end-->
	<script src="../libs/minicomps.min.js"></script>
	<script type="text/javascript" src="../libs/FileSaver.js"></script>
	<script>
	const { Toggle, HSlider,VSlider,Panel, Canvas ,Button,TextArea,TextBox,TextInput,Label,Window,LabelInput,TipsManager,RadioButton,ColorPicker,TabbarWindow,Checkbox,Knob,Stage,MoonTextArea,Dropdown,TabbarButton,ProgressBar} = mc
	const width = Stage.width-18;
	const height = Stage.height-18;
	const panel = new Panel(document.body, 0, 0, width,height);
	const leftPanel=new Canvas(panel, 0, 20, width/2,height-40);
	leftPanel.setOverflowAuto();
	leftPanel.style.overflow='scroll';
	leftPanel.color="#eee";
	var txtArea1=new TextArea(panel,0,20,'',this.onTxtArea.bind(this)).setSize(width/2,height-20);
	var names=['只看发出的','只看收到的','显示所有数据','只看最后十条','清空所有'];
	var i=1;
	names.forEach((a)=>{
		var btn=new Button(panel,(i-1)*90,0,a,this.onSetBtn.bind(this)).setSize(90);
		btn.name=''+(i++);
	})
	names=['复制','保存'];
	names.forEach((a)=>{
		var btn=new Button(panel,350+(i-1)*50,0,a,this.onSetBtn.bind(this)).setSize(50);
		btn.name=''+(i++);
	})
	var datas={};
	var count=1;
	var sendName='发出协议';
	var receiveNmae='收到协议';
	var agreements=[sendName,receiveNmae];
	var buttons=[];
	txtArea2=new MoonTextArea(panel,width/2,0).setSize(width/2,height-20);
	txtArea2.visible=false;
	function onTxtArea(){
		var das=txtArea1.text.split('-->');
		if(das.length<2){
			das=txtArea1.text.split('本地才有-')
		}
		//console.log(das)
		das.forEach((a)=>{
			for(let i=0;i<agreements.length;i++){
				let name=agreements[i];
				if(a.includes(name)){
					let as=a.split(name);
					as=as[1].split('{');
					name+=as.shift();
					let cnt='{'+as.join('{');
					try{
						datas[count+'.'+name]=JSON.parse(cnt);
					}catch(e){
						datas[count+'.'+name]=cnt;
					}
					count++;
				}
			}
		})
		if(das.length==1){
			try{
				datas['点开可看']=JSON.parse(txtArea1.text);
			}catch(e){}
		}
		console.log(datas);
		createButton();
	}
	function createButton(type=-1){
		txtArea1.visible=false;
		let len=buttons.length;
		for(let i=0;i<len;i++){
			leftPanel.removeChild(buttons[i]);
		}
		buttons.length=0;
		let i=0;
		let j=0;
		for(let k in datas){
			j++;
			if(type>=0){
				if(type==10){
					if(j<(len-type)) continue;
				}else{
					if(!k.includes(agreements[type])) continue;
				}
			}
			let btn=new Button(leftPanel,0,(20*(i++)),k,this.onButton.bind(this));
			btn.name=k;
			btn.setSize(width/2-17.5,20);
			buttons.push(btn);
		}
	}
	function onButton(e){
		var btn=e.target;
		var da=datas[btn.name];
		content=JSON.stringify(da);
		txtArea2.text=btn.name+'\n----------------------------\n';
		txtArea2.visible=true;
		let [spacing,j,i,tf]=[0,0,0,''];
		for(i=0;i<content.length;i++){
			let s=content.substr(i,1);
			if(s=="}"){
				tf+=("\n");
				spacing-=2;
				for(j=0;j<spacing;j++){
					tf+=(" ");
				}
			}
			tf+=(s);
			if(s==","){
				tf+=("\n");
				for(j=0;j<spacing;j++){
					tf+=(" ");
				}
			}
			if(s=="{"){
				tf+=("\n");
				spacing+=2;
				for(j=0;j<spacing;j++){
					tf+=(" ");
				}
			}
		}
		txtArea2.text+=tf;
	}
	function onSetBtn(e){
		var btn=e.target;
		switch(Number(btn.name)){
			case 1:
				createButton(0);
				break;
			case 2:
				createButton(1);
				break;
			case 3:
				createButton(-1);
				break;
			case 4:
				createButton(10);
				break;
			case 5:
				location.reload()
				break;
			case 6:
				copyString();
				break;
			case 7:
				saveString();
				break;
		}
	}
	function copyString(){
		txtArea2.input.select();
		document.execCommand('Copy');
		TipsManager.alert('复制成功');
	}
	function saveString(){
		var file = new File([txtArea2.text], "协议保存.txt", { type: "text/plain;charset=utf-8" })
		saveAs(file)
	}
	var dragDiv=document.getElementById('dragDiv');
	document.body.removeChild(dragDiv);
	document.body.appendChild(dragDiv);
	dragDiv.ondragover = function (e) {
				e.preventDefault();
			}
	dragDiv.ondrop = function (e) {
		e.preventDefault();
		files=e.dataTransfer.files;
		//console.log(files);
		for(var i=0;i<files.length;i++){
			var file=files[i];
			var reader = new FileReader();  
			reader.onload = function() {
				let result=this.result;
				txtArea1.text=result;
				onTxtArea();
			}
			reader.file=file;
			reader.readAsText(file);
		}
	}
	</script>
  </body>
</html>